<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务器日志智能分析系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }
        .upload-area:hover {
            border-color: #007bff;
            background: #e3f2fd;
        }
        .upload-area.dragover {
            border-color: #28a745;
            background: #d4edda;
        }
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            border: none;
            margin-bottom: 20px;
        }
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
        }
        .stat-card {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .loading {
            display: none;
        }
        .loading.show {
            display: block;
        }
        .log-entry {
            background: #f8f9fa;
            border-left: 4px solid #007bff;
            padding: 10px;
            margin: 5px 0;
            border-radius: 0 5px 5px 0;
        }
        .error-level {
            color: #dc3545;
            font-weight: bold;
        }
        .warning-level {
            color: #ffc107;
            font-weight: bold;
        }
        .info-level {
            color: #17a2b8;
            font-weight: bold;
        }
        .nav-tabs .nav-link {
            color: #495057;
        }
        .nav-tabs .nav-link.active {
            color: #007bff;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center py-3">
                    <h1 class="mb-0">
                        <i class="bi bi-graph-up"></i>
                        服务器日志智能分析系统
                    </h1>
                    <div class="btn-group" role="group">
                        <button class="btn btn-outline-primary" onclick="showRulesModal()">
                            <i class="bi bi-gear"></i> 规则配置
                        </button>
                        <button class="btn btn-outline-info" onclick="exportData()">
                            <i class="bi bi-download"></i> 导出数据
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 文件上传区域 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-upload"></i> 上传日志文件</h5>
                    </div>
                    <div class="card-body">
                        <div class="upload-area" id="uploadArea">
                            <i class="bi bi-cloud-upload display-1 text-muted"></i>
                            <h4 class="mt-3">拖拽文件到此处或点击选择</h4>
                            <p class="text-muted">支持 .tar.gz 格式的压缩包，日志文件位于 LogDump 目录下</p>
                            <input type="file" id="fileInput" accept=".tar.gz" style="display: none;">
                            <button class="btn btn-primary btn-lg" onclick="document.getElementById('fileInput').click()">
                                <i class="bi bi-folder2-open"></i> 选择文件
                            </button>
                        </div>
                        <div class="loading mt-3" id="loading">
                            <div class="d-flex align-items-center">
                                <div class="spinner-border text-primary me-3" role="status"></div>
                                <span>正在分析日志文件，请稍候...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分析结果区域 -->
        <div id="analysisResults" style="display: none;">
            <!-- 统计概览 -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3 id="totalLogs">0</h3>
                                <p class="mb-0">总日志数</p>
                            </div>
                            <i class="bi bi-file-text display-4"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3 id="uniqueComponents">0</h3>
                                <p class="mb-0">唯一组件</p>
                            </div>
                            <i class="bi bi-puzzle display-4"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3 id="duplicateRatio">0%</h3>
                                <p class="mb-0">重复率</p>
                            </div>
                            <i class="bi bi-exclamation-triangle display-4"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3 id="errorCount">0</h3>
                                <p class="mb-0">错误数量</p>
                            </div>
                            <i class="bi bi-bug display-4"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 详细分析标签页 -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs card-header-tabs" id="analysisTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
                                        <i class="bi bi-bar-chart"></i> 概览
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="components-tab" data-bs-toggle="tab" data-bs-target="#components" type="button" role="tab">
                                        <i class="bi bi-puzzle"></i> 组件分析
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="duplicates-tab" data-bs-toggle="tab" data-bs-target="#duplicates" type="button" role="tab">
                                        <i class="bi bi-exclamation-triangle"></i> 重复日志
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="errors-tab" data-bs-toggle="tab" data-bs-target="#errors" type="button" role="tab">
                                        <i class="bi bi-bug"></i> 错误分类
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="timeline-tab" data-bs-toggle="tab" data-bs-target="#timeline" type="button" role="tab">
                                        <i class="bi bi-clock"></i> 时间分析
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content" id="analysisTabContent">
                                <!-- 概览标签页 -->
                                <div class="tab-pane fade show active" id="overview" role="tabpanel">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h5>最活跃的组件</h5>
                                            <div id="activeComponents"></div>
                                        </div>
                                        <div class="col-md-6">
                                            <h5>错误类型分布</h5>
                                            <canvas id="errorChart"></canvas>
                                        </div>
                                    </div>
                                </div>

                                <!-- 组件分析标签页 -->
                                <div class="tab-pane fade" id="components" role="tabpanel">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h5>组件分类统计</h5>
                                            <canvas id="componentChart"></canvas>
                                        </div>
                                        <div class="col-md-6">
                                            <h5>组件详细列表</h5>
                                            <div id="componentList" class="table-responsive">
                                                <table class="table table-striped">
                                                    <thead>
                                                        <tr>
                                                            <th>组件名</th>
                                                            <th>类别</th>
                                                            <th>日志数</th>
                                                            <th>错误级别</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="componentTableBody"></tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 重复日志标签页 -->
                                <div class="tab-pane fade" id="duplicates" role="tabpanel">
                                    <div class="row">
                                        <div class="col-12">
                                            <h5>重复日志统计</h5>
                                            <div id="duplicateList"></div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 错误分类标签页 -->
                                <div class="tab-pane fade" id="errors" role="tabpanel">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h5>错误类型分布</h5>
                                            <canvas id="errorTypeChart"></canvas>
                                        </div>
                                        <div class="col-md-6">
                                            <h5>错误详情</h5>
                                            <div id="errorDetails"></div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 时间分析标签页 -->
                                <div class="tab-pane fade" id="timeline" role="tabpanel">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h5>小时分布</h5>
                                            <canvas id="hourlyChart"></canvas>
                                        </div>
                                        <div class="col-md-6">
                                            <h5>日期分布</h5>
                                            <canvas id="dailyChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 规则配置模态框 -->
    <div class="modal fade" id="rulesModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">规则配置</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="rulesTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="component-rules-tab" data-bs-toggle="tab" data-bs-target="#component-rules" type="button" role="tab">
                                组件分类规则
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="error-rules-tab" data-bs-toggle="tab" data-bs-target="#error-rules" type="button" role="tab">
                                错误分类规则
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content mt-3" id="rulesTabContent">
                        <div class="tab-pane fade show active" id="component-rules" role="tabpanel">
                            <div id="componentRulesEditor"></div>
                        </div>
                        <div class="tab-pane fade" id="error-rules" role="tabpanel">
                            <div id="errorRulesEditor"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveRules()">保存规则</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/main.js"></script>
</body>
</html> 